<template>
  <!-- 头部 -->
  <div class="header">
    <div class="header-con">
      <div class="title">
        <h2>叩丁狼电商运营平台</h2>
      </div>
      <el-radio-group v-model="isCollapse">
        <el-radio-button :label="false">expand</el-radio-button>
        <el-radio-button :label="true">collapse</el-radio-button>
      </el-radio-group>

      <el-dropdown>
        <span class="el-dropdown-link">
          用户
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>首页</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

  <div class="foot">
    <div class="menu">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        text-color="#fff"
        background-color="#344156"
        active-text-color="#409EFF"
        :router="true"
        unique-opened
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu
          :index="menu.id + ''"
          v-for="menu in menuConf"
          :key="menu.id"
        >
          <template #title>
            <span>{{ menu.title }}</span>
          </template>
          <template v-for="submenu in menu.children" :key="submenu.id">
            <el-menu-item
              v-if="!submenu.hidden"
              :index="'/' + menu.name + '/' + submenu.name"
              >{{ submenu.title }}</el-menu-item
            >
          </template>
        </el-sub-menu>
      </el-menu>
    </div>

    <!-- <-- 右侧内容 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </div>
  <!-- 菜单 -->
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useUserStore } from "@/store/modules/user";
import { ArrowDown } from "@element-plus/icons-vue";

const userStore = useUserStore();
let menuConf = computed(() => userStore.getMenusConf);

const isCollapse = ref(false);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style scoped>
.header {
  background-color: #409eff;
}
.header-con {
  display: flex;
  align-items: center;
  text-align: center;
  line-height: 70px;
  padding: 0 20px;
}
.el-radio-group {
  flex: 1;
}
.title > h2 {
  color: #fff;
  font-weight: 400;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  height: calc(100vh - 70px);
}
.foot {
  display: flex;
}
.el-main {
  width: calc(100vw - 250px);
  padding: 0;
  height: calc(100vh - 70px);
  overflow-y: auto;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
}
.el-dropdown-link {
  color: #fff;
}
</style>
